<template>
	<view class="content">
		<gameBasics v-if="acceptStatus" />

		<view class="content_">

			<view class="theme" v-if="!(game_config.quest_show==1?userPeople.cap_zt==2:true)||gameChall.time==0">
				保密中
			</view>
			<image class="theme" v-else :src="quest.pic" mode="aspectFit"></image>
			<view class="num">
				<view class="team">
					<image :src="gameChall.teamList.pic" mode="aspectFill"></image>
					{{gameChall.teamList.title||''}}
				</view>
				<view class="" style="display: flex;justify-content: center;">

					<flipcountdown @getTimeOut="getTimeOut" @timeOut="timeOut"
						:propsType="type==4||type==5||type==6?2:1" :endTime="endTime" :startDate="startDate"
						:valueTime="game_config.time" value="00:00:00" :autoplay="autoplay" zoom=".6" res="flipcountdown"/>
				</view>
				<view class="" style="display: flex;" v-if="userPeople.power||(userPeople.activ_list&&userPeople.cap_zt==2)">
					<block v-if="gameChall.time==0">
						<view class="game_btn" @click="$u.throttle(setAutoplay, 4000)">
							<view class="">

							</view>
							开始
						</view>
					</block>

					<block v-else>
						<view class="game_btn" @click="$u.throttle(correct, 2000)">
							<view class="">

							</view>
							<!-- ||game_config.type==4 -->
							{{game_config.type==3||game_config.type==5?'完成':'正确'}}
						</view>
						<view class="game_btn" @click="$u.throttle(skip, 2000)" v-if="type==4">
							<view class="">
							</view>
							过
							<view class=""
								style="position: absolute;top: calc(70vmin / 7.5);font-size: calc(28vmin / 7.5);color: #333;background-image: none;white-space: nowrap;">
								还有{{gameChall.skip_num||0}}次机会
							</view>
						</view>

						<view class="game_btn" @click="$u.throttle(upExamination, 2000)" v-if="type==6">
							<view class="">
							</view>
							错误
						</view>
					</block>


				</view>
	      <view v-else class="" style="font-size: calc(28vmin / 7.5);color: #333333;text-align: center;">
      		{{`等待 ${gameChall.teamList.title||''} 队长操作`}}
      	</view>

			</view>
		</view>


		<u-popup :show="resultShow" mode="center" round="calc(20vmin / 7.5)">
			<view class="popup">
				<image class="bg" src="/static/game/porpCardImg.png" mode=""></image>


				<view class="answerText">
					下一题请准备
				</view>
				<view class="time">
					{{date}}s
				</view>
			</view>
		</u-popup>
		<gameLoading />
	</view>
</template>

<script>
	import flipcountdown from '@/components/flipcountdown/flipcountdown.vue'
	export default {
		components: {
			flipcountdown
		},
		data() {
			return {
				resultShow: false,
				endTime: 0,
				startDate: 50,
				autoplay: false,
				gameData: {},
				quest: {},
				userPeople: {},
				game_config: {},
				gameChall: {},
				type: 0,
				date: 0,
				acceptStatus: true
			}
		},
		watch: {
			endTime() {
				// setInterval(()=>{
				// 	console.log(this.$refs.flipcountdown)
				// },3000)
				
    //     this.$refs.flipcountdown.init()
				
				this.startDate = (this.gameData.current_time - this.gameChall.time- (+this
						.gameChall.time_del || 0) + (+this.gameChall.time_add || 0)) * 10
						
			},
			autoplay() {
				console.log('我的阿油',this.quest,this.userPeople.type)
				if (!this.quest&&(this.userPeople.type==12||this.userPeople.type==11)){
					this.upExamination(true)
				}
			   
			}
		},
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
		},

		mounted() {
		
			uni.$on('onMessage', (res) => {
				if(!this.acceptStatus) return;
					this.$nextTick(() => {
						this.$store.commit('switchGame', {
							code: false
						})
					})
					if (res.data.code != 202) return;
					this.gameData = res.data.game
					this.gameChall = res.data.game_chall[0]
					this.game_config = res.data.game_config
					this.type = this.game_config.type
					this.quest = res.data.quest_list
					// this.teamList = res.data.team
					this.userPeople = res.data.userPeople

					let s = Date.parse(new Date()) / 1000
    
					this.endTime = this.game_config.time + (+this.gameChall.time || s) - (+this.gameChall
						.time_del || 0) + (+this.gameChall.time_add || 0)
						if(this.gameChall.time!=0){
								this.autoplay = true
						}else{
							this.autoplay = false
						}
					
					if (this.game_config.quest_num <= (this.gameChall.quest_num - 1)) {
						if(!this.autoplay){
							this.autoplay = true
							setTimeout(()=>{
								this.autoplay = false
							},500)
						}else{
							this.autoplay = false
						}
						
					}
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
					if(!this.$ws.socketTask) return this.$ws.init();
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},

		methods: {
setAutoplay(){
	let data = {
		game_id: this.gameData.id,
		activ_id: this.game_config.activ_id,
		team_id: this.userPeople.teamId
	}
	this.$myRuquestWs('home/game/team_go', data).then(res => {
		this.upExamination(true)
		uni.showToast({
			title: '开始计时',
			icon: 'none'
		});
	})
},
			skip() {
				if (!this.userPeople.cap_zt == 2) return;
				if(this.userPeople.type==12||this.userPeople.type==11) return this.upExamination(false,3);
				let data = {
					game_id: this.gameData.id,
					activ_id: this.game_config.activ_id,
					team_id: this.userPeople.teamId
				}
				this.$myRuquest('home/game/game_skip', data).then(res => {
					this.upExamination(res.code==401,3);
					
				})
			},
			getTimeOut(number) {
				if (this.userPeople.cap_zt != 2) return;
				
				if (this.type == 4 || this.type == 5 || this.type == 6) {
					number = this.gameChall.number
				} else if (number == -1) {
					number = (Date.parse(new Date()) / 1000) - this.gameChall.time - (+this.gameChall
						.time_del || 0) + (+this.gameChall.time_add || 0);
				}
				// return;
				if (this.gameChall.team_id != this.userPeople.teamId || this.gameChall.time == 0) return;
				let data = {
					game_id: this.gameData.id,
					activ_id: this.game_config.activ_id,
					team_id: this.gameChall.team_id,
					number
				}
				let url='home/game/game_end'
				if(this.userPeople.type==11||this.userPeople.type==12){
					url='home/game/bingo_do'
					data.key=this.userPeople.activ_list.key
				} 
				this.$myRuquestWs(url, data).then(res => {

				})


			},
			timeOut(e) {
				console.log('时间到', e)
			},
			correct() {
				if (!this.userPeople.cap_zt == 2) return;
				if((this.userPeople.type==12||this.userPeople.type==11)) return this.upExamination(false,1);
				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId
				}
				this.$myRuquest('home/game/quest_correct', data).then(res => {
					this.upExamination(false,1)
				})
			},

			upExamination(code = false,status=2) {
				
		// 		if(this.game_config.quest_num<=this.gameChall.quest_num) return 	uni.showToast({
		// 	title: '游戏结束',
		// 	icon: 'none'
		// });
				if (this.userPeople.cap_zt != 2) return;
				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId,
					status
				}
				let url='home/game/activ_quest'
				if(this.userPeople.type==12||this.userPeople.type==11){
				 url='home/game/quest_get_bingo'
				 data.activ_id=this.game_config.activ_id
				}
				this.$myRuquestWs(url, data).then(res => {
					if (code) return;
					this.resultShow = true
					this.date = 2
					var time_ = setInterval(() => {
						this.date--
						if (this.date <= 0) {
							this.resultShow = false
							clearInterval(time_)
						}
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
	}

	.popup {
		position: relative;
		width: calc(624vmin / 7.5);
		height: calc(484vmin / 7.5);

		.time {
			position: absolute;
			bottom: calc(20vmin / 7.5);
			right: calc(20vmin / 7.5);
			width: calc(60vmin / 7.5);
			height: calc(60vmin / 7.5);
			text-align: center;
			line-height: calc(60vmin / 7.5);
			color: #fff;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .23);
		}
	}

	.answerText {
		color: #F9CF72;
		font-size: calc(60vmin / 7.5);
		text-align: center;
		position: absolute;
		bottom: calc(100vmin / 7.5);
		left: 50%;
		transform: translateX(-50%);
		font-weight: 700;
		width: 100%;
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.content_ {
		display: flex;
		width: 75vw;
		height: 100%;
		margin: auto;
		align-items: center;

		.theme {
			// flex: 1;
			background-color: #fff;
			height: calc(500vmin / 7.5);
			width: calc(500vmin / 7.5);
			line-height: calc(500vmin / 7.5);
			position: relative;
			font-size: calc(70vmin / 7.5);
			text-align: center;
			// margin-right:  calc(60vmin / 7.5);
		}

		.num {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: calc(600vmin / 7.5);

			.team {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: calc(50vmin / 7.5);
				font-weight: 700;

				image {
					width: calc(90vmin / 7.5);
					height: calc(90vmin / 7.5);
					margin-right: calc(20vmin / 7.5);
				}
			}
		}
	}

	
	
</style>
